<template>
  <div
    ref="tagCloud"
    class="word-cloud-container"
    :style="containerStyle"
  ></div>
</template>

<script>
import JsTagCloud from "js-tag-cloud";

export default {
  name: "WordCloudContainer",
  props: {
    // 1. 词云数据（必填：字符串数组，对应标签内容）
    wordList: {
      type: Array,
      required: true,
      default: () => [],
    },
    // 2. 词云基础配置（可选：覆盖JsTagCloud默认配置）
    cloudConfig: {
      type: Object,
      default: () => ({
       shape: "flat",
        radius: 230, // 滚动半径, 单位px
        maxSpeed: "normal", // 滚动最大速度, 取值: slow, normal(默认), fast
        initSpeed: "normal", // 滚动初速度, 取值: slow, normal(默认), fast
      direction: 80,
        keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
    pauseOnHover: true  ,// 鼠标悬停暂停, 取值: false, true(默认)
     freezeDecel: false, 
       weight: true, 
    }),
    },
    // 3. 容器自定义样式（可选：灵活调整尺寸、背景等）
    containerStyle: {
      type: Object,
      default: () => ({
        width: "470px",
        height: "452px",
        background: "#f6faff",
      }),
    },
  },
  data() {
    return {
      resizeTimer: null, // 防抖定时器（处理窗口 resize）
    };
  },
  mounted() {
    // 初始化词云（容器渲染完成后执行）
    this.initWordCloud();
    // 监听窗口尺寸变化，实现响应式
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeUnmount() {
    // 清理：移除事件监听 + 销毁词云实例
    window.removeEventListener("resize", this.handleWindowResize);
    this.destroyWordCloud();
  },
  watch: {
    // 词云数据变化时，重新渲染
    wordList: {
      handler() {
        this.initWordCloud();
      },
      deep: true,
    },
    // 配置变化时，重新渲染
    cloudConfig: {
      handler() {
        this.initWordCloud();
      },
      deep: true,
    },
  },
  methods: {
    // 核心：初始化JsTagCloud
    initWordCloud() {
      const tagCloudDom = this.$refs.tagCloud;
      // 校验：容器不存在/数据为空时不执行
      if (!tagCloudDom || this.wordList.length === 0) return;

      // 1. 先销毁旧实例（避免重复渲染）
      this.destroyWordCloud();

      // 2. 合并配置（传入的配置覆盖默认）
      const finalConfig = {
        ...this.cloudConfig,
        // 词云标签点击事件：通过$emit传递给父组件

        onclick: (tag) => {
          this.$emit("tag-click", tag);
        },
        // 添加鼠标悬停事件
        onmouseover: () => {
          if (this.cloudConfig.pauseOnHover) {
            tagCloudDom.__tagCloud.pause();
          }
        },
        // 添加鼠标离开事件
        onmouseout: () => {
          if (this.cloudConfig.pauseOnHover) {
            tagCloudDom.__tagCloud.resume();
          }
        },
      };

      // 3. 初始化新词云
      JsTagCloud(tagCloudDom, this.wordList, finalConfig);
      // 等待DOM更新后添加事件监听
      this.$nextTick(() => {
        const tags = tagCloudDom.getElementsByClassName("js-tag-cloud-item");
        Array.from(tags).forEach((tag) => {
          tag.addEventListener("click", () => {
            this.$emit("tag-click", tag.textContent);
          });
         
        });
      });
    },

    // 销毁词云实例（清空容器内容）
    destroyWordCloud() {
      const tagCloudDom = this.$refs.tagCloud;
      if (tagCloudDom) {
        tagCloudDom.innerHTML = ""; // 清除现有标签
      }
    },

    // 窗口resize防抖处理：避免频繁重新渲染
    handleWindowResize() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.initWordCloud();
      }, 300);
    },
  },
};
</script>

<style lang="scss" scoped>
/* 仅针对目标容器及其内部词云标签的样式 */
.word-cloud-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  /* 保留原设计的圆角 */
  overflow: hidden;

  /* 覆盖JsTagCloud默认标签样式，匹配军事主题 */
  ::v-deep .js-tag-cloud-item {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 18px;

    /* 悬停效果优化 */
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
